<template>
	<view class="">
		<swiper class="swiper" :indicator-dots="indicatorDots" autoplay="autoplay" :interval="interval"
			:duration="duration" circular indicator-color="rgba(255,255,255,0.2)"
			indicator-active-color="rgba(255,255,255,0.7)">
			<swiper-item v-for="ban in list" :key="ban.bannerid">
				<image style="width: 100vw;" :src="ban.image" mode="widthFix"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "banner",
		props: {
			list: Array,
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
			};
		},
		methods: {
			jumpDetails(id) {
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: `https://apis.netstart.cn/vmovier/post/view?postid=${id}`,
					success: (res) => {
						this.$store.commit('updateDetails', {
							details: res.data.data,
						});
						uni.navigateTo({
							url: `../../pages/details/details?postid=${id}`,
							complete: () => {
								uni.hideLoading();
							}
						})
					}

				})
			}
		}
	}
</script>

<style lang="less">
	.item-title {
		background-color: black;
		color: white;
		text-align: center;
		line-height: 100rpx;
	}
</style>
